<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<h:head>
	<script language="JavaScript"> 
	history.forward();

    function SetNumEditing(num){
    	document.getElementById("NumEditing").value = num;
    }

    function SetFieldsValues(obj){
        var fld = document.getElementById("NumEditing").value;
    	document.getElementById("f" + fld + ":IdFacility0" + fld).value = document.getElementById(obj.id.replace("flfc", "IdFac")).value;
    	document.getElementById("f" + fld + ":bFacility0" + fld).value = document.getElementById(obj.id.replace("flfc", "facDesc")).innerHTML;
    	document.getElementById("f" + fld + ":bF0" + fld + "Q").value = 0.00;
    	document.getElementById("f" + fld + ":bF0" + fld + "Q").disabled = false;
    	document.getElementById("f" + fld + ":bF0" + fld + "P").value = 0.00;
    } 

    function SetQtyPrice(num) {
        alert(num);
    }
    
    function ResetFieldsValues(obj){
        
    	document.getElementById("f1:IdFacility01").value = 0;
    	document.getElementById("f1:bFacility01").value = "";
    	document.getElementById("f1:bF01Q").value = 0;
    	document.getElementById("f1:bF01P").value = 0.00;
    	
    	document.getElementById("f2:IdFacility02").value = 0;
    	document.getElementById("f2:bFacility02").value = "";
    	document.getElementById("f2:bF02Q").value = 0;
    	document.getElementById("f2:bF02P").value = 0.00;
    	
    	document.getElementById("f3:IdFacility03").value = 0;
    	document.getElementById("f3:bFacility03").value = "";
    	document.getElementById("f3:bF03Q").value = 0;
    	document.getElementById("f3:bF03P").value = 0.00;
    	
    	document.getElementById("f4:IdFacility04").value = 0;
    	document.getElementById("f4:bFacility04").value = "";
    	document.getElementById("f4:bF04Q").value = 0;
    	document.getElementById("f4:bF04P").value = 0.00;
    	
    	document.getElementById("f5:IdFacility05").value = 0;
    	document.getElementById("f5:bFacility05").value = "";
    	document.getElementById("f5:bF05Q").value = 0;
    	document.getElementById("f5:bF05P").value = 0.00;
    	
    	CalTotalPrice();
    } 

    function CalTotalPrice() {
    	var totalPrice;
    	totalPrice = parseFloat(document.getElementById("vPrice").innerHTML) + 
        	parseFloat(document.getElementById("f1:bF01P").value) +
        	parseFloat(document.getElementById("f2:bF02P").value) +
        	parseFloat(document.getElementById("f3:bF03P").value) +
        	parseFloat(document.getElementById("f4:bF04P").value) +
        	parseFloat(document.getElementById("f5:bF05P").value);
    	document.getElementById("f0:bTotalPrice").value = totalPrice;
    }
</script>
</h:head>

<body>
	<big>Booking Process</big>
	<hr />
	<br />
	<br />
	<h:panelGrid columns="2" border="2" color="black">		
		<h:outputText value="Booking Date and Time : " />
		<h:outputText value="#{bookingDetail.BookDateTimeDesc()}"
			style="color: #5459c9;" />
		<h:outputText value="Book by : " />
		<h:outputText id="username" value="#{bookingDetail.bookingBy}"
			style="color: #5459c9;" />
		<h:outputText value="Venue : " />
		<h:outputText value="#{bookingDetail.venusDesc}"
			style="color: #5459c9;" />
		<h:outputText value="Venue Price : " />
		<h:outputText id="vPrice" value="#{bookingDetail.venusPrice}"
			style="color: #5459c9;" />
	</h:panelGrid>
	<br />
	<hr align="left" style="width: 50%" />
	<i>*** Optional ***</i>
	<h:inputHidden id="NumEditing" value="0" />
	<hr align="left" width="50%" />
	<h:outputStylesheet>
        .bdc {
        background-color: gray;
        }
 
        .wdc {
        font-weight: bold;
        font-style: italic;
        }
    </h:outputStylesheet>

	<h:form id="f1">
		<h:panelGrid columns="4" border="1" style="text-align:center;">
			<h:panelGroup id="f01">
				<h:outputText value="[01]" />
				<h:inputHidden id="IdFacility01"
					value="#{bookingDetail.bookFacility01}" />
				<h:commandLink onclick="SetNumEditing(1)">help
				<rich:componentControl target="popup" operation="show" />
				</h:commandLink>
			</h:panelGroup>
			<h:inputText id="bFacility01"
				value="#{bookingDetail.DispFacilityDesc(1)}"
				style="color:#5459c9;width:200px;" disabled="true" />
			<h:inputText id="bF01Q" value="#{bookingDetail.bookFacility01Qty}"
				style="text-align:right;color:#5459c9;width:100%;"
				onblur="CalTotalPrice();" />
			<f:ajax render="bF01P" event="keyup"
				listener="#{bookingDetail.CalFacilityPrice(1)}">
			</f:ajax>
			<h:inputText id="bF01P" value="#{bookingDetail.bookFacility01Price}"
				style="text-align:right;color:#5459c9;width:100%;" disabled="true" />
		</h:panelGrid>
	</h:form>

	<h:form id="f2">
		<h:panelGrid columns="4" border="1" style="text-align:center;">
			<h:panelGroup id="f02">
				<h:outputText value="[02]" />
				<h:inputHidden id="IdFacility02"
					value="#{bookingDetail.bookFacility02}" onchange="SetQtyPrice(2);" />
				<h:commandLink onclick="SetNumEditing(2)">help
				<rich:componentControl target="popup" operation="show" />
				</h:commandLink>
			</h:panelGroup>
			<h:inputText id="bFacility02"
				value="#{bookingDetail.DispFacilityDesc(2)}"
				style="color:#5459c9;width:200px;" disabled="true" />
			<h:inputText id="bF02Q" value="#{bookingDetail.bookFacility02Qty}"
				style="text-align:right;color:#5459c9;width:100%;"
				onblur="CalTotalPrice();" />
			<f:ajax render="bF02P" event="keyup"
				listener="#{bookingDetail.CalFacilityPrice(2)}">
			</f:ajax>
			<h:inputText id="bF02P" value="#{bookingDetail.bookFacility02Price}"
				style="text-align:right;color:#5459c9;width:100%;" disabled="true" />
		</h:panelGrid>
	</h:form>

	<h:form id="f3">
		<h:panelGrid columns="4" border="1" style="text-align:center;">
			<h:panelGroup id="f03">
				<h:outputText value="[03]" />
				<h:inputHidden id="IdFacility03"
					value="#{bookingDetail.bookFacility03}" onchange="SetQtyPrice(3);" />
				<h:commandLink onclick="SetNumEditing(3)">help
				<rich:componentControl target="popup" operation="show" />
				</h:commandLink>
			</h:panelGroup>
			<h:inputText id="bFacility03"
				value="#{bookingDetail.DispFacilityDesc(3)}"
				style="color:#5459c9;width:200px;" disabled="true" />
			<h:inputText id="bF03Q" value="#{bookingDetail.bookFacility03Qty}"
				style="text-align:right;color:#5459c9;width:100%;"
				onblur="CalTotalPrice();" />
			<f:ajax render="bF03P" event="keyup"
				listener="#{bookingDetail.CalFacilityPrice(3)}">
			</f:ajax>
			<h:inputText id="bF03P" value="#{bookingDetail.bookFacility03Price}"
				style="text-align:right;color:#5459c9;width:100%;" disabled="true" />
		</h:panelGrid>
	</h:form>

	<h:form id="f4">
		<h:panelGrid columns="4" border="1" style="text-align:center;">
			<h:panelGroup id="f04">
				<h:outputText value="[04]" />
				<h:inputHidden id="IdFacility04"
					value="#{bookingDetail.bookFacility04}" onchange="SetQtyPrice(4);" />
				<h:commandLink onclick="SetNumEditing(4)">help
				<rich:componentControl target="popup" operation="show" />
				</h:commandLink>
			</h:panelGroup>
			<h:inputText id="bFacility04"
				value="#{bookingDetail.DispFacilityDesc(4)}"
				style="color:#5459c9;width:200px;" disabled="true" />
			<h:inputText id="bF04Q" value="#{bookingDetail.bookFacility04Qty}"
				style="text-align:right;color:#5459c9;width:100%;"
				onblur="CalTotalPrice();" />
			<f:ajax render="bF04P" event="keyup"
				listener="#{bookingDetail.CalFacilityPrice(4)}">
			</f:ajax>
			<h:inputText id="bF04P" value="#{bookingDetail.bookFacility04Price}"
				style="text-align:right;color:#5459c9;width:100%;" disabled="true" />
		</h:panelGrid>
	</h:form>

	<h:form id="f5">
		<h:panelGrid columns="4" border="1" style="text-align:center;">
			<h:panelGroup id="f05">
				<h:outputText value="[05]" />
				<h:inputHidden id="IdFacility05"
					value="#{bookingDetail.bookFacility05}" onchange="SetQtyPrice(5);" />
				<h:commandLink onclick="SetNumEditing(5)">help
				<rich:componentControl target="popup" operation="show" />
				</h:commandLink>
			</h:panelGroup>
			<h:inputText id="bFacility05"
				value="#{bookingDetail.DispFacilityDesc(5)}"
				style="color:#5459c9;width:200px;" disabled="true" />
			<h:inputText id="bF05Q" value="#{bookingDetail.bookFacility05Qty}"
				style="text-align:right;color:#5459c9;width:100%;"
				onblur="CalTotalPrice();" />
			<f:ajax render="bF05P" event="keyup"
				listener="#{bookingDetail.CalFacilityPrice(5)}">
			</f:ajax>
			<h:inputText id="bF05P" value="#{bookingDetail.bookFacility05Price}"
				style="text-align:right;color:#5459c9;width:100%;" disabled="true" />
		</h:panelGrid>
	</h:form>
	<br />

	<h:form id="f0">
		<h:outputText value="Booking Total Price : "
			style="font-size:24px;text-align:right;color:blue;width:160px;" />
		<h:inputText id="bTotalPrice"
			value="#{bookingDetail.BookingTotalPrice()}"
			style="font-size:24px;text-align:right;color:blue;width:160px;"
			readonly="true" />
		<br />
	</h:form>

	<br />
	<br />

	<h:form id="f">
		<h:commandButton id="btnAct" value="Booking Confirm"
			action="#{bookingDetail.SaveBooking()}" style="font-size:26px;">
		</h:commandButton>
		<h:commandButton value="Reset" type="reset"
			onclick="ResetFieldsValues(this);" style="font-size:26px;" />
	</h:form>


	<rich:popupPanel id="popup" modal="true" autosized="true">
		<f:facet name="header">
			<h:outputText value="Facilities Help" />
		</f:facet>
		<f:facet name="controls">
			<h:outputLink value="#"
				onclick="#{rich:component('popup')}.hide(); return false;">
					X
            	</h:outputLink>
		</f:facet>
		<h:panelGroup id="popupG" style="float:center" columns="1" border="1">
			<h:dataTable id="dt01" border="1"
				value="#{facilityList.facilitiesList}" var="flfl" headerClass="h1">


				<h:column id="Code">
					<h:commandButton id="flfc" value="#{flfl.facilityCode}"
						onclick="SetFieldsValues(this);#{rich:component('popup')}.hide(); return false;">
					</h:commandButton>

					<f:facet name="header">
						<h:outputText value="Code" />
					</f:facet>
				</h:column>
				<h:column id="Description">
					<h:outputLabel id="facDesc" value="#{flfl.facilityDesc}" />
					<f:facet name="header">
						<h:outputText value="Description" />
					</f:facet>
				</h:column>
				<h:column id="Type">
					<h:outputLabel id="facType" value="#{flfl.facilityType}" />
					<f:facet name="header">
						<h:outputText value="Type" />
					</f:facet>
				</h:column>
				<h:column id="Formula">
					<h:outputLabel id="facFormula" value="#{flfl.facilityFormula}" />
					<f:facet name="header">
						<h:outputText value="Cal. Formula" />
					</f:facet>
				</h:column>
				<h:column id="UnitPrice">
					<h:outputText id="facUnitPrice" value="#{flfl.facilityUnitPrice}"
						align="right" />
					<f:facet name="header">
						<h:outputText value="Unit Price" />
					</f:facet>
				</h:column>
				<h:column id="Id" style="width:0px;">
					<h:inputHidden id="IdFac" value="#{flfl.idFacility}" />
				</h:column>
			</h:dataTable>
		</h:panelGroup>
	</rich:popupPanel>

</body>
</html>
